<!--
 * @Author: jhw
 * @Date: 2025-08-07 15:51:45
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:49:31
 * @Description:
-->
<template>
  <h1
    v-if="computedStatus.type === 0"
    class="pt-10px pb-10px text-center font-200"
    :class="{
      '!italic': !computedStatus.titleItalic,
      '!font-bold': !computedStatus.titleWeight,
    }"
    :style="{
      fontSize: computedStatus.titleSize + 'px',
      color: computedStatus.titleColor,
    }"
  >
    {{ computedStatus.title }}
  </h1>
  <p
    v-else
    :class="{
      'text-center': computedStatus.position,
      '!italic': !computedStatus.descItalic,
      '!font-bold': !computedStatus.descWeight,
    }"
    :style="{
      fontSize: computedStatus.descSize + 'px',
      color: computedStatus.descColor,
    }"
  >
    {{ computedStatus.desc }}
  </p>
</template>

<script setup lang="ts">
import type { TypeStatus } from '@/types';
import { getCurrentStatus, getStringStatusByCurrentStatus, getTextStatus } from '@/utils';
import { computed } from 'vue';

const props = defineProps<{
  componentId: string;
  status: TypeStatus;
}>();

const computedStatus = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  type: getCurrentStatus(props.status.type),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));
</script>

<style scoped></style>
